<template>
    <div class="login-background">
        <img src="../assets/images/guohui.png" class="login-pic1">
        <h1 class="login-head">检察院运维管理系统</h1>
        <h4 class="login-welcome">欢迎登录管理系统</h4>
        <div class="login-div">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm"
                hide-required-asterisk status-icon>
                <el-form-item label="账号" prop="user">
                    <el-input v-model="ruleForm.user" maxlength="15" clearable placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" show-password maxlength="15"
                        placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="btn1" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                user: '16552512719',
                password: '749'
            },
            rules: {
                user: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '账号输入有误', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern: /^\d{3,9}$/, message: '密码输入有误', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        submitForm(formName) {
            console.log(this.$axios)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: '/admin',
                        method: 'get',
                        params: {
                            tel: this.ruleForm.user,
                            password: this.ruleForm.password
                        }
                    }).then(({ data }) => {
                        console.log(1, data)
                        if (data.length > 0) {
                            this.$message({
                                message: '登录成功',
                                type: 'success',
                                duration: 1400
                            })
                            sessionStorage.setItem('登录信息', JSON.stringify(data[0]))
                            this.$router.push({ name: 'index', params: data[0] })
                        } else {
                            this.$message.error('密码有误')
                            return false
                        }
                    })
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.login-background {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #139FED 0%, #1382D1 100%);
    box-shadow: 0px 3px 6px 0px rgba(12, 77, 122, 0.46);

    .login-pic1 {
        width: 64px;
        height: 64px;
        margin-top: 150px;
        margin-left: calc(50% - 32px);
    }

    .login-head {
        width: 360px;
        height: 56px;
        font-size: 40px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 56px;
        margin-left: calc(50% - 180px);
        margin-top: 20px;
        background: linear-gradient(180deg, #FFFFFF 0%, #A2DCFE 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .login-welcome {
        width: 128px;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 22px;
        margin-left: calc(50% - 64px);
        margin-top: 96px;
    }

    .login-div {
        width: 400px;
        height: 240px;
        background: #F9FDFF;
        border-radius: 10px;
        margin-left: calc(50% - 200px);
        margin-top: 28px;
        padding-top: 50px;

        .demo-ruleForm {
            margin-right: 40px;


            .btn1 {
                margin-left: 50px;
                width: 150px;
                background: #0970B8;
                border-radius: 16px;
                margin-top: 30px;
            }
        }
    }
}
</style>